<!doctype html>
<html lang="en">
        <head>
                <meta charset="utf-8"/>
                <title>San Antonio, USA</title>
                <link href="styles/styles.css" rel="stylesheet" type="text/css"/>
        </head> 
        <body onLoad="parent.loadPage( 'Sydney, Australia' );javascript:parent.subtractTravel()">
                 
                
                       <section>
                        <header>
                                <h1>Sydney, Australia</h1>
                        </header>
                                
                        <div id="main-content">
                                <div class="column">
                                        <article>
                      <header>
          <h2>Flag of Australia</h2>
          </header>
  <img src="images/australiaflag.jpg" alt="Flag" title="Flag" height="130" width="190"/>
  </article>
      </div>
  <div class="column">
  <article>
           <header>
  <h2>Sydney City</h2>
  <img src="images/sydney.jpg" alt="Sydney" title="Sydney" height="130" width="190"/>
   </header>
                                                
 </article>
   </div>
   <h2>
    Fact about Sydney:
    </h2>
    
    <span id="bankroll" ></span>
   

<p>Sydney is the biggest and most populous city in Australia.     </p>
                        <aside id="travel">
                                <h2 class="header-button" onClick="javascript:parent.showDestinations()">Travel</h2>
                                <div id="destinations">
                                </div>
                        </aside>
                        <aside id="investigate">
                                <h2 class="header-button" onClick="javascript:parent.showClue()">Investigate</h2>
                                <div id="clue">
                                </div>
                        </aside>
        </body>
</html>